.carousel { 
    position: relative; 
    overflow: hidden; 
    width: 650px; 
    height: 500px;
    aspect-ratio: 32/16;
    margin-left: 50px;
 }
    .track{ 
        display: flex; 
        transition: transform 0.6s ease; 
        height: 500px; 
        justify-content: center;
        margin-top: 10px;
    }
    .slide{ 
        max-width: 100%; 
        flex-shrink: 0; }
    .slide img { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
    }
    .btn {
      position: absolute; 
      top: 95%; 
      transform: translateY(-50%);
      background: white; 
      border: 1px solid #ccc;
      border-radius: 50%; 
      width: 36px; height: 36px; 
      cursor: pointer; 
      font-size: 16px;
    }
    .prev { left: 50px; }
    .next { right: 50px; }
    .dots { 
        display: flex; 
        align-items: center; 
        justify-content: center;
        gap: 10px; 
        margin-top: 5px; 
    margin-bottom: 5px;}
    .dot  { 
        width: 8px; 
        height: 8px; 
        border-radius: 50%; 
        background: #ccc; 
        cursor: pointer; 
        border: none; }
    .dot.active { background: #333; }